<template>
	<view class="content">
		<view class="swiper">
			<swiper circular interval="3000" previous-margin="25" next-margin="0" :current="current" @change="changeCurrent">
				<swiper-item v-for="(item, index) in list" :key="item.keywords">
					<view class="item">
						<image class="img" :src="item.image" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
						<view class="tips1">{{item.label}}</view>
						<view class="tips2">{{item.intro}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="taocanbox">
			<view class="titlebox">
				<view class="left"></view>
				<view class="center">开通会员选择</view>
				<view class="right"></view>
			</view>
			<view class="tips">追剧更优惠</view>
			<view class="taocan">
				<view class="item" v-for="(item,index) in taocanList" :key="index">
					<view class="oldprice">{{item.title}}</view>
					<view class="price">￥{{item.price}}/{{item.unit}}</view>
					<view class="buy" @tap="buy(list[current].level,item.days,item.price)">立即开通</view>
				</view>
			</view>
		</view>
		<view class="quanyibox">
			<view class="titlebox">
				<view class="left"></view>
				<view class="center">会员权益</view>
				<view class="right"></view>
			</view>
			<view class="tips">追剧更优惠</view>
			<view class="list">
				<view class="item" v-for="(item,index) in quanyiList" :key="index">
					<text>{{item.text}}</text>{{item.intro}}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				list:[],
				current:0,
				taocanList:[],
				quanyiList:[]
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async buy(level,days,price){
				this.$wanlshop.to(`/pages/user/money/memberpay?level=${level}&price=${price}&days=${days}&title=${this.list[this.current].name}`);
				console.log(level,days);
				return;
				await uni.request({
					url: '/wanlshop/order/submit',
					method: 'POST',
					data: {
						paytype:'balance',
						level:level,
						days:days,
						method:'app',
					},
					success: res => {
						
					}
				});
			},
			changeCurrent(e) {
				console.log(e);
				this.current = e.detail.current;
				this.taocanList = this.list[this.current].pricedata
				this.quanyiList = this.list[this.current].rightdata
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/vip/index',
					method: 'GET',
					data: {
						
					},
					success: res => {
						this.list = res.data.vipList;
						this.taocanList = this.list[this.current].pricedata
						this.quanyiList = this.list[this.current].rightdata
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	
	page{
		background: linear-gradient( 180deg, #F8E1B7 0%, #F7E6C4 63%, #FFFFFF 100%);
	}
	.swiper{
		margin-top: 20rpx;
		.item{
			width: 636rpx;
			height: 244rpx;
			// background: url(https://dcdn.cxycoder.com/user/membership.png);
			// background-repeat: no-repeat;
			// background-size: 100%;
			position: relative;
			.img{
				width: 636rpx;
				height: 244rpx;
				position: absolute;
				border-radius: 16rpx;
			}
			.title,.tips1,.tips2{
				position: absolute;
				left: 40rpx;
			}
			.title{
				font-weight: 600;
				font-size: 32rpx;
				color: #874F12;
				top: 30rpx;
			}
			.tips1{
				font-weight: 400;
				font-size: 28rpx;
				color: #874F12;
				top: 75rpx;
			}
			.tips2{
				font-size: 24rpx;
				color: #6D6D6D;
				bottom: 35rpx;
			}
		}
	}
	.quanyibox{
		width: 686rpx;
		height: 424rpx;
		background: linear-gradient( 180deg, #FFFAF0 0%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 40rpx auto;
		.titlebox{
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding-top: 20rpx;
			.left{
				width: 142rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, rgba(217,217,217,0) 0%, #FFE9BF 100%);
			}
			.right{
				width: 142rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, #FFE8BD 0%, #FDF1DE 100%);
			}
			.center{
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				margin: 0 10rpx;
			}
		}
		.tips{
			font-size: 24rpx;
			color: #727272;
			margin: 10rpx;
			text-align: center;
		}
		.list{
			.item{
				font-weight: 400;
				font-size: 24rpx;
				color: #3E3E3E;
				padding: 5rpx 35rpx;
				text{
					font-size: 24rpx;
					font-weight: 500;
					margin-right: 10rpx;
				}
			}
		}
	}
	.taocanbox{
		width: 686rpx;
		height: 424rpx;
		background: linear-gradient( 180deg, #FFFAF0 0%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: -20rpx auto;
		.titlebox{
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding-top: 20rpx;
			.left{
				width: 142rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, rgba(217,217,217,0) 0%, #FFE9BF 100%);
			}
			.right{
				width: 142rpx;
				height: 4rpx;
				background: linear-gradient( 90deg, #FFE8BD 0%, #FDF1DE 100%);
			}
			.center{
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				margin: 0 10rpx;
			}
		}
		.tips{
			font-size: 24rpx;
			color: #727272;
			margin: 10rpx;
			text-align: center;
		}
		.taocan{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx;
			box-sizing: border-box;
			.item{
				width: 196rpx;
				height: 238rpx;
				background: linear-gradient( 180deg, #F7E3AC 0%, #FBD37C 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #FFDDB1;
				padding: 30rpx 0px;
				box-sizing: border-box;
				.oldprice{
					font-weight: bold;
					font-size: 24rpx;
					color: #956B1C;
					text-align: center;
					// text-decoration: line-through;
					margin-top: 10rpx;
				}
				.price{
					font-weight: 600;
					font-size: 30rpx;
					color: #7F3900;
					text-align: center;
					margin-top: 5rpx;
					border-bottom: 2px dotted #956B1C;
					margin: 0 auto;
					width: 155rpx;
					padding: 15rpx 0rpx;
					padding-top: 5rpx;
				}
				.buy{
					width: 162rpx;
					height: 56rpx;
					background: #FEF4EA;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #AA3B1C;
					line-height: 56rpx;
					text-align: center;
					margin: 20rpx auto;
				}
			}
		}
	}
</style>
